<template>
  <div>
    <ul>
      <li>
        <router-link :to="`/login?username=${username}&age=${age}`" exact>
          登录
        </router-link>
      </li>
      <li>
        <router-link to="/register/harry/28" exact> 注册 </router-link>
      </li>
      <li>
        <router-link to="/article" exact> 文章 </router-link>
      </li>
      <li>
        <router-link to="/list" exact> 列表 </router-link>
      </li>
    </ul>

    <hr />

    <div>
      <router-view></router-view>
      <!-- <RouterView></RouterView> -->
    </div>
  </div>
</template>
 
<script>
export default {
  components: {},

  data() {
    return {
      username: 'despot',
      age: 28
    }
  },

  created() {},

  methods: {}
}
</script>

<style scoped>
ul {
  display: flex;
}

li {
  list-style: none;
  margin-right: 10px;
}

.router-link-active {
  color: red;
}
</style>